.invitation-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .body-wrap {
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;

    .wrapper {
      width: 100%;

      .content-wrap {
        height: 624rpx;
        background: #FFFCEB;
        border-radius: 0rpx 0rpx 16rpx 16rpx;

        .swiper-item {
          display: flex;
          flex-flow: column;
          font-size: 0;
          align-items: center;

          .record-item {
            display: flex;
            margin-bottom: 24rpx;
            padding: 16rpx 0;

            .avatar {
              width: 120rpx;
              height: 120rpx;
              border-radius: 50%;
            }

            .desc {
              display: flex;
              font-size: 32rpx;
              padding-top: 12rpx;
              margin-left: 16rpx;
              flex-flow: column;

              .name {
                color: #666666;
              }
              .time{
                font-size: 26rpx;
                margin-top: 12rpx;
              }
            }
          }
        }

        .red-packet {
          width: 288rpx;
          height: 288rpx;
        }

        .btn-wrap {
          margin-top: 64rpx;
          width: 400rpx;
          height: 84rpx;
          background: #FFCC00;
          border-radius: 400rpx 400rpx 400rpx 400rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 1;
          font-size: 32rpx;
          font-weight: 500;
          color: #FFFFFF;
        }

        .text-wrap {
          margin-top: 16rpx;
          display: flex;
          flex-flow: column;
          align-items: center;

          .count {
            height: 48rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #7E511A;
            line-height: 48rpx;
          }

          .notice {
            height: 32rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: #7E511A;
            line-height: 32rpx;
            margin-top: 16rpx;
          }
        }
      }

      .tab-wrap {
        width: 100%;
        display: flex;

        .tab-item {
          flex: 1;
          height: 108rpx;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;

          .title {
            height: 44rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 44rpx;
          }

          .desc {
            height: 32rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: #FFFFFF;
            line-height: 32rpx;
          }

          &:first-child {
            background-color: #FFCC00;
            border-radius: 16rpx 0 0 0 0;

          }

          &:last-child {
            background-color: #4CC0FA;
            border-radius: 0 16rpx 0 0;

          }
        }
      }
    }
  }

  .image-wrapper {
    height: 600rpx;
    position: relative;
    width: 100%;

    .gift {
      width: 376rpx;
      height: 368rpx;
      position: absolute;
      right: 0;
      bottom: 68rpx;
      z-index: 2;
    }

    .text-logo {
      position: absolute;
      top: 32rpx;
      left: 72rpx;
      display: flex;
      flex-flow: column;
      line-height: 1;
      z-index: 2;
      color: #FFFFFF;

      .logo {
        font-size: 52rpx;
        font-weight: 600;
      }

      .tip {
        margin-top: 52rpx;
        width: 280rpx;
        font-size: 40rpx;
        font-weight: 500;
        color: #FFFFFF;
      }
    }

    .bg {
      position: absolute;
      width: 100%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      height: 100%;
      z-index: 1;
    }

  }
}